@import 'variable.scss';

.recom-book-board {
	width: 1050px; //1200px;
	margin: 40px auto;

	.recom-book-item {
		position: relative;
		height: 285px;
		background-color: #fff;
		border-radius: 20px;
		overflow: hidden;
		margin-bottom: 20px;
		box-shadow: 1px 3px 5px #999;

		.book-cover {
			width:300px;
			height: 100%;
			
			.book-lk {
				position: absolute;
				top: 17.5px;
				left: 40px;
				width: 210px;
				height: 250px;
				z-index: 3;
				border-radius: 8px;
				box-shadow: 30px 30px 8px #999;
				transition: all .3s linear;
				cursor: pointer;
				
				.book-img,
				.bgBoard {
                    position: absolute;
					top: 0;
					right: 0;
					height: 250px;
					border-radius: 8px;
				}

				.book-img {
					width: 210px;
					z-index: 2;
					transform-origin: left;
				    transition: all .3s ease-in;
				}

				.bgBoard {
					width: 210px;
					z-index: 1;
					border: 3px solid #0606068f;
					border-left: none;
				}

				&:hover {
					box-shadow: 25px 25px 8px #999;

					.book-img {
						transform: rotateY(20deg) skewY(-2.8deg);
						box-shadow: 3px 0 0 #999;
					}
				}
			}
		}

		.book-info {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
            padding: 15px 15px 15px 330px;

			.book-tt {
				font-size: 18px;
				margin-bottom: 10px;
				
				.book-lk {
					&:hover {
					color: $defaultColor;
					}
				}
			}

			.book-desc {
				font-size: 14px;
				color: #999;
				// white-space: nowrap;
				// text-overflow: ellipsis;
				// overflow: hidden;  
				height:65px;
				overflow:hidden; 
				text-overflow: ellipsis; 
				display: -webkit-box; 
				-webkit-line-clamp: 3; 
				-webkit-box-orient: vertical;
			}

			.spread-info {
				margin-top: 15px;
				color: #666;

				i {
					display: inline-block;
					width: 0;
					height: 14px;
					margin: 0 15px;
					vertical-align: -2px;
					border-right: 1px solid #666;
				}
			}
			
			.free,
			.price {
				font-size: 22px;
				margin: 20px 0;
			}
			
			.free {
				color: #5fb41b;
			}

			.price {
				color: #f40;
			}

			.btn-wrap {
				.btn {
					width: 120px;
					font-size: 16px;
					margin-right: 15px;
				}
			}
		}
	}
}